<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-for="tab in tabs" @click="curComp = tab.comp">
				{{tab.label}}
			</button>
			component组件用来显示其他组件，is属性控制显示哪个组件
			<component :is="curComp"></component>
		</div>
		<script>
			var app = Vue.createApp({
				data() {
					return {
						curComp:'comment-comp',
						tabs:[
							{comp:'intro-comp',label:'商品介绍组件',},
							{comp:'comment-comp',label:'商品评价组件',},
							{comp:'question-comp',label:'商品常见问答',}
						]
					}
				}
			});
			app.component('intro-comp',{
				template:'<div style="background-color:lightblue;width:300px;height:200px">商品介绍信息内容</div>'
			})
			app.component('comment-comp',{
				template:'<div style="background-color:red;width:300px;height:200px">商品评价信息内容</div>'
			})
			app.component('question-comp',{
				template:'<div style="background-color:green;width:300px;height:200px">商品常见问答内容</div>'
			})			
			var vm = app.mount("#app")
		</script>



	</body>
</html>